{% extends 'ux_packages/package.html.twig' %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'live-component',
        eyebrowText: 'Reactive Twig Templates'
    } %}
        {% block title_header %}
            An Interactive UI <br><em>in</em> PHP <em>&</em> Twig
        {% endblock %}

        {% block sub_content %}
           Develop your interface.. from the comfort of Symfony.<br> No Javascript needed.
        {% endblock %}
    {% endcomponent %}
{% endblock %}

{% block code_block_left %}
    <twig:CodeBlock filename="src/Twig/Components/Package/SearchPackages.php" />
{% endblock %}

{% block code_block_right %}
    <twig:CodeBlock filename="templates/components/Package/SearchPackages.html.twig" />
{% endblock %}

{% block demo_title %}
    Live Components
{% endblock %}

{% block demo_content %}
    <twig:SearchPackages />
    <div class="d-flex eyebrows pt-4 gap-2 align-items-center justify-content-center">
        <div>Automatic <em>debouncing</em></div>
        <twig:ux:icon name="circle-fill" />
        <div>Loading states</div>
        <twig:ux:icon name="circle-fill" />
        <div>Required writing <em>ZERO JavaScript</em></div>
    </div>
{% endblock %}

{% block documentation_links %}{% endblock %}

{% block package_links %}
<section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
    <h2 class="eyebrows mt-5" id="demos">Live Component Demos</h2>
    <div class="d-md-flex justify-content-md-between text-center align-items-center text-md-start">
        <h2 class="ubuntu pt-2 component-headlines">Find out what else you can <span style="color: #AE5929;">build</span></h2>
        <a style="height: 100%;" class="btn btn-md btn-outline-primary my-3 my-md-0"
           href="https://symfony.com/bundles/ux-live-component/current/index.html">
            Read full Documentation
            <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);"/>
        </a>
    </div>

    <div class="row mt-5 pb-5">
        <div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));">
            {% for demo in demos %}
                <twig:Demo:DemoCard demo="{{ demo }}" />
            {% endfor %}
        </div>
    </div>
</section>

{{ parent() }}

{% endblock %}
